<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box2">
            <div class="header">
                <Step
                    ref="step"
                    :current-step="currentStep"
                    :steps-label="stepsLabel"
                    :total-steps="stepsLabel.length"></Step>
            </div>
            <div v-if="isShow" class="container">
                <div v-show="currentStep == 1">
                    <Activity ref="ActivityRef" :page-type="pageType" @next="next" @cancel="empty"></Activity>
                </div>
                <div v-show="currentStep == 2" style="width: 100%">
                    <Basic ref="BasicRef" :page-type="pageType" @next="next" @resetForm="bacj"></Basic>
                </div>
                <div v-show="currentStep == 3" style="width: 100%">
                    <WelcomeConfig ref="WelcomeConfigRef" :page-type="pageType" @callOff="bacj"></WelcomeConfig>
                </div>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <template v-if="currentStep != 3">
                <el-button v-if="currentStep == 1" @click="cancelHandle">取消</el-button>
                <el-button v-else @click="prevStepHandle">上一步</el-button>
                <el-button type="primary" @click="nextStepHandle">下一步</el-button>
            </template>
            <template v-else>
                <el-button @click="prevStepHandle">上一步</el-button>
                <el-button v-if="pageType != 'look'" type="primary" @click="saveHandle">保存</el-button>
                <el-button v-else type="primary" @click="saveHandle">返回</el-button>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Step from '@/components/Step.vue';
import Activity from './components/Activity.vue';
import Basic from './components/Basic.vue';
import WelcomeConfig from './components/WelcomeConfig.vue';
import { ref, reactive, onBeforeMount, onMounted, computed, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { lookCode } from '@/api/smartMarketing/drainage/channelCode/index';
import { useStore } from '@/store';
import bus from '@/utils/bus';
import { getContentHeight } from '@/utils/utils';
const store = useStore();

const router = useRouter();
const route = useRoute();

const isShow = ref(false);
const id = ref(route.query.id);

const stepsLabel = ref([
    { title: '活动信息', stepIndex: 1 },
    { title: '基础设置', stepIndex: 2 },
    { title: '高级设置', stepIndex: 3 }
]);
const step = ref();
const currentStep = ref(1);
const pageType = ref(route.query.type);
const params = reactive({ activity_id: route.query.id });

const contentHeight = computed(() => getContentHeight());

const emptyStore = (data?: any) => {
    store.dispatch('groupCode/lookData', data);
};
bus.on('emptyStore', emptyStore);
const scrollbarRef = ref<any>(null);
/**
 * @description: 滚动到顶部
 */
const setScrollTopHandle = () => {
    nextTick(() => {
        scrollbarRef.value?.setScrollTop(0);
    });
};
const next = () => {
    currentStep.value++;
    step.value.next();
    setScrollTopHandle();
};
const bacj = () => {
    currentStep.value--;
    step.value.back();
    setScrollTopHandle();
};
const ActivityRef = ref<any>(null);
const BasicRef = ref<any>(null);
const WelcomeConfigRef = ref<any>(null);
/**
 * @description: 取消
 */
const cancelHandle = () => {
    if (currentStep.value == 1) {
        ActivityRef.value.cancel();
    }
};
/**
 * @description: 上一步
 */
const prevStepHandle = () => {
    if (currentStep.value == 2) {
        BasicRef.value.resetForm();
    } else if (currentStep.value == 3) {
        WelcomeConfigRef.value.callOff();
    }
};
/**
 * @description: 下一步
 */
const nextStepHandle = () => {
    if (currentStep.value == 1) {
        ActivityRef.value.next();
    } else if (currentStep.value == 2) {
        BasicRef.value.next();
    }
};
/**
 * @description: 保存
 */
const saveHandle = () => {
    if (currentStep.value == 3) {
        WelcomeConfigRef.value.saveWel();
    }
};
const getData = async () => {
    if (pageType.value == 'look' || pageType.value == 'edit') {
        // const res = await lookCode({ activity_id: id.value })
        // store.dispatch('groupCode/lookData', res)
        // isShow.value = true
        lookCode({ activity_id: id.value }).then((res: any) => {
            store.dispatch('groupCode/lookData', res).then(() => {
                isShow.value = true;
            });
            // store.dispatch('groupCode/dataProcessing', res)
        });
    } else {
        isShow.value = true;
    }
};
// onBefore
getData();
</script>

<style lang="scss" scoped>
// .app-container{
//   height:100%
// }
.header {
    padding: 21px;
    border: 1px solid #eaeaea;
    border-top: none;
    border-radius: 4px;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    background: #fff;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.container {
    box-sizing: border-box;
    height: calc(100vh - 298px);

    // width: 100%;
    padding: 24px;
    border-radius: 4px;

    // box-sizing: border-box;
    // box-shadow: 0px 4px 4px 1px rgba(240, 240, 240, 0.5);
    // border-radius: 1px 1px 1px 1px;
    // opacity: 1;
    border: 1px solid #eaeaea;
    border-bottom: none;

    // background: #ffffff;
    // align-items: center;
    // // height: v-bind(contentHeight);
    // overflow: auto;
    background-color: #fff;
}
</style>
